<!DOCTYPE html>
<html>
<meta charset="UTF-8">

<head>
    <script>
        // js的代码是顺序执行的！
        // 不存在函数重载！重名的函数，会选择执行最后一个！
    </script>
    <script>
        // 函数一般都放在<head>标签中
        function myFunction()
        {
            document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
        }
        function myFunction(a,b,c)
        {
            document.getElementById("demo").innerHTML="我和上面的函数重名了，会选择执行我！";
        }
        function myFunction2(a, b)
        {
            document.getElementById("demo").innerHTML="我的一个带参数的函数，参数是：" + a + "," + b;
        }
        function displayDate() {
            document.getElementById("btn1").innerHTML="函数" + Date()
        }
    </script>
</head>
<body>
.
.
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落</p>");
</script>
.
.
<p id="demo">点击按钮后，我会变！</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<br>
<button type="button" onclick="myFunction2(1, 2)">再尝试一下</button>
<br>
<script>
    // 页面打开后，弹出个提示框
    window.alert(5+6)
</script>

<script>/*=====================================================================================================*/</script>
<br>
<button onclick="this.innerHTML=Date()">The time is?</button>
<br>
<button id="btn1" onclick="displayDate()">The time is?</button>


<script>/*=====================================================================================================*/</script>
<p id="typeof-str">
    <script>
        document.getElementById("typeof-str").innerHTML =
            typeof "john" + "<br>" +
            typeof 3.14 + "<br>" +
            typeof NaN + "<br>" +
            typeof false + "<br>" +
            typeof [1,2,3,4] + "<br>" +
            typeof {name:'john', age:34} + "<br>" +
            typeof new Date() + "<br>" +
            typeof function () {} + "<br>" +
            typeof myCar + "<br>" +
            typeof null;
    </script>
</p>


<script>/*=====================================================================================================*/</script>
<script>
    var str = "Visit w3cschool";
    var n = str.search(/w3cschool/i);
    "我属于脚本，浏览器看不到我！"
    document.write("search result:" + n)
    console.log("我是调试字符串！")
</script>

<script>/*=====================================================================================================*/</script>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    验证表单: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>
<script>
    function validateForm()
    {
        var x=document.forms["myForm"]["fname"].value;
        if (x==null || x=="")
        {
            alert("First name must be filled out");
            return false;
        }
        alert("验证通过，但不跳转！")
        return false
    }
</script>

<script>/*======================================== json对象 ==========================================================*/</script>
<p id="demo-json"></p>

<script>
    var text = '{ "employees" : [' +
        '{ "firstName":"John" , "lastName":"Doe" },' +
        '{ "firstName":"Anna" , "lastName":"Smith" },' +
        '{ "firstName":"Peter" , "lastName":"Jones" } ]}';
    var obj = JSON.parse(text);

    document.getElementById("demo-json").innerHTML = "json数据解析：" +
        obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

<script>/*======================================== 自定义函数 =========================================================*/</script>
<script>
    /*
    * 下面这个相当于 function myFunction(a,b) {return a*b;}
    * */
    var myFunction = new Function("a", "b", "return a * b");
    var x = myFunction(4, 3);
    document.write("自定义函数的输出结果：" + x + "<br>")
</script>

<script>/*======================================== 更有意思的函数 =====================================================*/</script>
<script>
    x = sumAll(1, 123, 500, 115, 44, 88);

    function sumAll() {
        var i, sum = 0;
        for (i = 0; i < arguments.length; i++) {
            sum += arguments[i];
        }
        return sum;
    }
    document.write("sumall:" + x + "<br>")

    var obj = {x:1};
    // 通过对象传递参数
    function myFunction(obj) {
        obj.x++; //修改参数对象obj.x的值，函数外定义的obj也将会被修改
        console.log(obj.x);
    }
    console.log(obj.x); // 1
    myFunction(obj);    // 2
    console.log(obj.x); // 2

    function myFunction(x, y) {
        if (y === undefined) {
            y = 0;
        }
        console.log(y);
    }
    // 这个函数和上面 y === undefined 一样
    function myFunction(x, y) {
        y = y || 0;
        console.log(y);
    }
</script>

<script>/*======================================== 更有意思的函数 =====================================================*/</script>
<script>

    function myFunction() {
        return this;
    }
    myFunction();                // 返回 window 对象

    var myObject = {
        firstName:"John",
        lastName: "Doe",
        fullName: function () {
            // 此时this指myobject
            return this.firstName + " " + this.lastName;
        }
    }
    console.log(myObject.fullName());         // 返回 "John Doe"

    // 构造函数:
    function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName  = arg2;
    }

    // This creates a new object
    var x = new myFunction("John","Doe");
    x.firstName;                             // 返回 "John"
    console.log(x.firstName)

</script>

<script>/*======================================== 闭包 ==============================================================*/</script>
<script>
    function add() {
        var counter = 0;
        function plus() {counter += 1;}
        plus();
        plus();
        plus();
        return counter;
    }
    console.log("add:" + add())

    // 闭包！
    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();

    add();
    add();
    add();
    console.log("add:" + add())

</script>
</body>
</html>